<!--个人页面-->
<template>
  <div class="content-view">
    <el-backtop/>
    <div class="top">
      <el-avatar v-if="userDetail" :size="200" :src="userDetail.profile.avatarUrl"></el-avatar>
      <el-avatar v-else :size="200" :src="avatarImg"></el-avatar>
      <div class="info">
        <div class="name">
          <span class="font-weight">{{ userDetail.profile.nickname }}</span>
          <div class="tag-info">
            <!--             歌手认证标签-->
            <div class="tags">
              <!--            TODO:这里重新处理，分析一下要取那个字段-->
              <div
                  v-if="userDetail.profile?.mainAuthType?.desc.length>1"
                  class="attestation">
                <img alt="" src="@/assets/img/attestation.png">
                <span>  {{
                    userDetail.profile?.mainAuthType?.desc
                  }}</span>
                <span
                    v-for="v in  userDetail.profile?.mainAuthType.tags"
                    v-if="userDetail.profile?.mainAuthType.tags">
                、{{ v }}
              </span>

              </div>
              <div>
                <i class="level">Lv{{ userDetail.level }}</i>
                <div class="gender">
                  <!--0未填写，1男性，2女性-->
                  <el-icon v-show="userDetail.profile.gender===2">
                    <Female/>
                  </el-icon>
                  <el-icon v-show="userDetail.profile.gender===1">
                    <Male/>
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="btn">
              <!--              <button-->
              <!--                  v-if="userDetail.profile.artistId"-->
              <!--                  class="white-btn"-->
              <!--                  @click="toArtist">-->
              <!--                <img alt="" src="@/assets/img/microphone.png" style="width: 20px;height: 20px; ">-->
              <!--                歌手页-->
              <!--              </button>-->


              <div

                  class="followed"
                  @click="handleFollow"
              >
                <!--              本人主页-->
                <button
                    v-if="userStore.accountInfo?.userId==userDetail?.profile?.userId"
                    class="white-btn" style="padding-left: 20px;"
                    @click.stop="handleLogout">
                  <img alt=""
                       src="@/assets/img/logout.jpg"
                       style="width: 13px;height: 14px;margin-right: 2px;margin-top: -2px;">

                  退出登录
                </button>
                <button v-if="userDetail.profile.followMe&&userDetail.profile.followed" class="white-btn">
                  <el-icon>
                    <Switch/>
                  </el-icon>
                  互相关注
                </button>
                <button v-else-if="userDetail.profile.followed" class="white-btn">
                  <el-icon>
                    <Check/>
                  </el-icon>
                  已关注
                </button>
                <button
                    v-else-if="!userDetail.profile.followed&&userStore.accountInfo?.userId!==userDetail?.profile?.userId"
                    class="white-btn">
                  <el-icon class="plus-icon">
                    <Plus/>
                  </el-icon>
                  关注
                </button>

              </div>
            </div>

          </div>
        </div>
        <ul class="data">
          <li >
            <span @click="handleUserEvent">{{ userDetail.profile.eventCount }}</span>
            <span @click="handleUserEvent">动态</span>
          </li>
          <li>
            <span @click="handleFollows ">{{ userDetail.profile.follows }}</span>
            <span @click="handleFollows ">关注</span>
          </li>
          <li>
            <span @click="handleFolloweds">{{ userDetail.profile.followeds }}</span>
            <span @click="handleFolloweds">粉丝</span>
          </li>
        </ul>
        <div class="attribute">
          <span>用户id：{{ userDetail.profile?.userId }}</span>
          <span>出生日期：{{ birthday }}</span>
          <span style="display: flex;"><span style="">个人介绍：</span>
            <TextCollapse :text="userDetail?.profile?.signature"></TextCollapse>

        </span>
        </div>

      </div>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane :name="1" label="创建的专辑">

        </el-tab-pane>
        <el-tab-pane :name="2" label="收藏的歌单">
        </el-tab-pane>
      </el-tabs>
      <SongCard  v-if="activeName==1" :dropdownRefresh="false" :loading="loading" :playList="createList" type="playList"
                @loadData="loadData"></SongCard>
      <SongCard v-if="activeName==2" :dropdownRefresh="false" :loading="loading" :playList="collectList" type="playList"
                @loadData="loadData"></SongCard>

    </div>
    <!--取关用户确认框-->
    <el-dialog
        v-model="followVisible"
        title="取消关注"
        width="400px"
    >
      <span>确定取消关注该好友？</span>
      <template #footer>
      <span class="dialog-footer">
        <button class="pink-btn" @click="followVisible = false">继续关注</button>
        <button class="white-btn" @click="followUser">仍要取消</button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import SongCard from "@/components/Card/SongCard/index.vue"
import TextCollapse from '@/components/TextCollapse/index.vue'
import {ref, reactive, watch} from "vue"
import {useRoute, useRouter} from "vue-router"
import {getUserDetail, getUserPlaylist, userFollow} from "@/api/user/index"
import {useUser} from '@/store/user'
import {useTimestampFormat} from '@/hooks/useTimestampFormat'
import avatarImg from '@/assets/img/avatar.png'
import {Female, Male, Plus, Check, Switch} from '@element-plus/icons-vue'
import {usePlaylist} from '@/hooks/usePlaylist'
import type {PlaylistInfo} from '@/types/playlist.d.ts'
import {artistDetail} from "../../api/artist";
import {logout} from "../../api/login";
import {ElMessage} from 'element-plus'
import {useArtistInfo} from "../../hooks/useArtistInfo";

//变量
let loading = ref(false)
const route = useRoute()
const router = useRouter()
const userStore = useUser()
const followVisible = ref(false)//取关确认对对话框控件
let queryParams = reactive({
  uid: 0,
  limit: 30,
  offset: 0//   (页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0
})
let userDetail = reactive<PersonalDetail>({
  level: 0,
  profile: {
    "userId": 0,
    "birthday": 0,
    "nickname": '',
    "avatarUrl": '',
    "gender": 0,
    "followed": false,
    "signature": '',
    "followeds": 0,
    "follows": 0,
    "eventCount": 0,
    "playlistCount": 0,
  }
})
const activeName = ref(1)
let birthday = ref('')
let createList = ref([]) //创建的歌单
let collectList = ref([]) //收藏的歌单
let followQuery = reactive({ //关注用户请求参数
  t: <0 | 1>0,//0取关，1关注
  id: route.query.uid//用户id
})

//方法
//本人退出登录
const handleLogout = async () => {
  let res = await logout()
  if (res.code === 200) {
    await userStore.clearAccount()
    ElMessage('退出登录成功~(´▽`)ﾉ')
  }
}
//获取用户详情
const getDetail = () => {
  getUserDetail({uid: route.query.uid}).then((res: PersonalDetail) => {
    if (res.code === 200) {
      userDetail.level = res.level
      userDetail.profile = res.profile
      console.log('个人详情', res)
      birthday.value = useTimestampFormat(res.profile.birthday)
      getPlaylist()
    }
  })
}
getDetail()
//获取用户歌单信息
const getPlaylist = () => {
  queryParams.uid = route.query.uid
  loading.value = true
  getUserPlaylist(queryParams).then((res: any) => {
    loading.value = false
    // 分辨哪些是创建歌单，哪些是收藏（有一个creator属性，记录歌单创建者信息，其中包含属性nickname,记录创建者名字）
    let playlist = usePlaylist(res.playlist, userDetail.profile.nickname)

    createList.value.push(...playlist.createList)
    collectList.value.push(...playlist.collectList)
  })
}
//跳转动态页面
const handleUserEvent =()=>{
  router.push({
    name: 'userEvent',
    query: {
      info:JSON.stringify(userDetail.profile)

    }
  })
}
//跳转到关注页面
const handleFollows = () => {

  router.push({
    name: 'follows',
    query: {
      uid: userDetail.profile?.userId,
      userName: userDetail.profile.nickname,
      follows: userDetail.profile.follows
    }
  })
}
//加载更多创建的专辑数据
const loadData = () => {
  if (collectList.value.length > 0 || createList.value.length > 0) {
    queryParams.offset += 30
  }
  getPlaylist()
}
//跳转到歌手页
const toArtist = async (v) => {
  //歌手信息
  let info = await useArtistInfo(v)
  await router.push({
    name: 'artistDetail',
    query: {
      info: JSON.stringify(info)
    }
  })
}
//跳转到粉丝页面
const handleFolloweds = () => {
  router.push({
    name: 'followeds',
    query: {
      uid: userDetail.profile?.userId,
      userName: userDetail.profile.nickname,
      followeds: userDetail.profile.followeds
    }
  })
}
//点击了关注/取关用户
const handleFollow = () => {
  //取关则展示对话框.关注则不用
  if (userDetail.profile.followed) {
    followVisible.value = true
  } else {
    followUser()
  }
}
//发起关注、取关请求
const followUser = () => {
  followVisible.value = false
  followQuery.t = userDetail.profile.followed ? 0 : 1
  userFollow(followQuery).then((res: any) => {
    if (res.code === 200) {
      userDetail.profile.followed = !userDetail.profile.followed
    }
  })
}
//监听仓库登陆状况
watch(() => userStore.accountInfo, (newVal: object) => {
  getPlaylist()
})

</script>

<style lang="less" scoped>
.content-view {
  height: calc(100% - 58px);
}

.el-avatar {
  min-width: 200px;
}

.top {
  display: flex;
  margin-bottom: 30px;

  .info {
    width: 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;

    .name {
      padding-bottom: 15px;
      width: 100%;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid @lightTheme;

      .font-weight {
        font-size: 26px;
      }

      .tag-info {
        display: flex;
        width: 100%;
        justify-content: space-between;
        font-size: 12px;

        .btn {
          display: flex;

        }

        .tags {
          display: flex;
        }

        .attestation {
          display: inline-block;
          line-height: 16px;
          height: 18px;
          text-align: center;
          background-color: #fde4e2;
          color: #ed4036;
          border-radius: 8px;
          margin-top: 17px;
          margin-right: 10px;

          span:last-child {
            padding-right: 10px;
          }

          img {
            margin-right: 5px;
            width: 15px;
            height: 15px;
          }
        }

        .plus-icon {
          color: @pinkFont;
        }

        .followed {
          .white-btn {
            margin-bottom: -4px;
            position: relative;
            padding-left: 30px;
          }

          .el-icon {
            left: 13px;
            top: 9px;
            position: absolute;
            font-size: 14px;
            display: inline-block;
          }
        }

        .gender {
          display: inline-block;
          margin-left: 10px;
          margin-top: 16px;
          line-height: 16px;
          text-align: center;

          :deep(.el-icon) {
            font-size: 13px;
            border-radius: 50%;
            width: 16px;
            height: 16px;
          }

          :deep(.el-icon:first-child) {
            color: @pinkFont;
            background-color: @pink;
          }

          :deep(.el-icon:last-child) {
            color: #359ccf;
            background-color: #bff3ff;
          }
        }

        .level {
          display: inline-block;
          height: 18px;
          //width: 30px;
          border-radius: 30px;
          padding-left: 5px;
          padding-right: 5px;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
          background-color: @pink;
          margin-top: 15px;
        }
      }
    }

    .data {
      display: flex;

      li:last-child {
        padding-left: 10px;
      }
      li:first-child {
      text-align: left;
        width: 65px;
      }

      li {

        //background-color: red;
        text-align: center;
        margin-top: 15px;
        border-right: 1px solid @lightTheme;
        width: 80px;
        height: 50px;
        display: flex;
        flex-direction: column;
        font-size: 20px;

        span:last-child {
          font-size: 13px;
          color: @fontColor2;
        }

        span:first-child {
          cursor: pointer;
        }
      }

      li:last-child {
        border: 0;
      }



    }

    .attribute {
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      color: @fontColor2;
      font-size: 13px;
      line-height: 20px;
    }
  }
}

.label {
  margin-top: 30px;
  margin-bottom: 10px;
}

.el-tabs {
  left: 0px;
  padding-top: 10px;
  position: relative;
  background-color: #fff;
  width: 100%;
  z-index: 999;
  //margin-top: -8px;
}

:deep(.el-tabs__item.is-active) {
  .font-weight
}

:deep(.el-tabs__item) {
  font-size: 16px;
  color: @fontColor;
}

/*去掉tabs底部的下划线*/
:deep(.el-tabs__nav-wrap:after) {
  position: static !important;
}

:deep(.el-tabs__active-bar) {
  transition: none;
  height: 3px;

}

:deep(.el-tabs__header) {
  margin: 0;
  //margin-bottom: 30px;
}

:deep(.el-avatar) {
  border: 1px solid #e7e2e2;
}
</style>
